import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { ArrowLeftOutlined, UploadOutlined } from "@ant-design/icons";
import { Space, Typography, Button, Form, Input, message, Upload } from "antd";
const { Text, Link } = Typography;


const Add = () => {

  const [pngFile, setPngFile] = useState(null); //存储广告图片
  const navigate = useNavigate();

  const back = () => {
    navigate("/home/products_data/list");
  };

  // const handleUploadChange = (info) => {
  //   const {fileList:newFileList} = info;
  //   if(newFileList.length > 0){
  //     setPngFile(newFileList[0])
  //   }
  // }
  const props = {
    name: "file", // 最好指定name属性，以便在表单提交或文件上传时识别
    beforeUpload: (file) => {
      setPngFile(file)
      // 阻止自动上传，改为手动处理
      return false;
    },
    onChange: (info) => {
      // console.log(info.file);      
      //  // 获取上传的文件列表
      //  const { fileList: newFileList } = info;
      //  // 确保只有第一个文件被选中
      //  if (newFileList.length > 0) {
      //    setPngFile(newFileList[0]);
      //  }
    },
  };

  const onFinish = async (values) => {
    console.log("Success:", values);
  
   // 创建FormData对象
   const formData = new FormData();
   // 添加广告信息到formData
   formData.append("adCompany", values.adCompany);
   formData.append("adName", values.adName);
   formData.append("adCategory", values.adCategory);
   // 添加文件到formData
   if (pngFile) {
     formData.append("file", pngFile);
   }
   console.log(formData);
   
    
    try {  
      // await _addNew(formData);      
      message.success("商品添加成功！");  
      navigate("/home/products_data/list"); // 成功后重定向到广告列表  
    } catch (error) {  
      if (error.response) {  
        // 根据返回的错误信息做处理  
        message.error(error.response.data.message || "添加广告失败");  
      } else {  
        message.error("添加广告时发生未知错误");  
      }  
    } 
  };


  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    message.error("请检查输入");
  };

  return (
    <>
    <div className="add ">
        <div className="back_title ">
          <ArrowLeftOutlined
            onClick={back}
            style={{ fontSize: "16px", marginRight: "15px" }}
          />
          <Text type="secondary" style={{ fontSize: "16px" }}>
            商品信息管理/新增商品
          </Text>
        </div>
        <div></div>
        <div className="add_form clearfix">
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="商品名称"
              name="adCompany"
              rules={[
                {
                  required: true,
                  message: "输入公司名!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="广告名称"
              name="adName"
              rules={[
                {
                  required: true,
                  message: "输入名称!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="所属分类"
              name="adCategory"
              rules={[
                {
                  required: true,
                  message: "输入分类!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="商品图片"
              name="file"
              rules={[
                {
                  required: true,
                  message: "上传广告图片!",
                },
              ]}
            >
              <Upload {...props}>
                <Button icon={<UploadOutlined />}>上传图片</Button>
              </Upload>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" style={{ float: "right" }} htmlType="submit">
                添加
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  )
}
export default Add;
